<template>
	<view class="main">
		<!-- 若需显示自定义导航栏，需要在App.vue中引入Vue -->
		<cu-custom bgColor="bg-gradual-green">
			<block slot="content">助田园</block>
		</cu-custom>
		<scroll-view scroll-y="true">
			<view class="scrollView">
				
				<!-- 位置栏 -->
				<!-- <view class="locationBar">
					<text class="text-xl cuIcon-location locationIcon text-green"></text>
					<picker 
						class="locationPicker"
						@change="pickerChange" 
						:index="areaPicker.index" 
						:range="areaPicker.areaList">
						<view>
							{{areaPicker.areaList[areaPicker.index]}}
						</view>
					</picker>
				</view> -->
				<!-- 位置栏 -->
				
				<!-- 问好 -->
				<!-- <view class="sayHello">
					{{sayHello.nowState}}好，{{sayHello.userName}}
				</view> -->
				<!-- 问好 -->
				
				<!-- 轮播图 -->
				 <view class="swiperView">
					 <carousel :img-list="swiper.swiperList" url-key="url"/>
				</view> 
				<!-- 轮播图 -->
				
				<!-- 商品菜单选项 -->
				<view class="menuView">
					<view class="menuLabel">
						<text class="cuIcon-title text-orange"></text>
						主题专区
					</view>
					
					<view class="menuContent">
						<view class="menuItem" v-for="menu in menu.menuList" :key="menu.index" hover-class="navigator-hover" :data-url="menu.menuUrl" @click="menuClick">
							<image :src="menu.menuImg" mode="aspectFill" style="width: 100upx; height: 100upx;"></image>
							<view style="margin-top: 5upx; text-align: center;">{{menu.menuName}}</view>
						</view>
					</view>
					
				</view>
				
				<!-- 商品菜单 -->
				
				<!-- 精彩活动 -->
				<view class="activityView">
					<view class="activityLabel">
						<text class="cuIcon-title text-purple"></text>
						热门活动
					</view>
					<scroll-view 
					scroll-x="true" 
					class="activityScroll" 
					show-scrollbar="true"
					 >
						<view class="activityItem" v-for="activity in activity.activityList" :key="activity.index">
							<image style="border-radius: 20upx;width: 500upx;height: 300upx;"  :src="activity.activityImg" mode="scaleToFill"></image>
						</view>
					</scroll-view>
				</view>
				<!-- 精彩活动 -->
				
				<!-- 热卖商品  -->
				<view class="goodsView">
					<view class="goodsLabel">
						<view class="" style="text-align: right; margin-right: 30upx; float: right;">
							<image src="../../static/new.png" style="width: 50upx;height: 50upx;" mode=""></image>
						</view>
						
						<view class="" style="float: left;">
							<text class="cuIcon-title text-red"></text>
							热卖商品
						</view>
						
					</view>
					
					<view class="goodsContent">
						
							<view class="goodsItem" v-for="good in goods.goodsList">
								<navigator :url="'/pages/goodsDetail/goodsDetail?id='+good.goodsId">
									<image style="width: 250upx;height: 250upx; border-radius: 15upx;" :src="'https://www.2306.tech/CCShop/images/goods/'+good.goodsId+'/'+good.goodsId+'-0.jpg'" mode=""></image>
									<view class="goodsName">{{good.goodsName}}</view>
									<view class="goodsPrice">￥{{good.goodsPrice}}</view>
								</navigator>
							</view>
					</view>
				</view>
				<!-- 热卖商品 -->
				
				
				
				
				
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	import carousel from '../../components/vear-carousel.vue'
	import {getIndexGoods} from '../../api/goodsAPI.js'
	export default {
		components:{
			carousel
		},
		data() {
			return {
				areaPicker:{
					index: 0,
					areaList: ['北京城市学院','北京联合大学']
				},
				sayHello:{
					nowState:'上午',
					userName:'王镭树'
				},
				swiper:{
					swiperList:[
						{
							index: 0,
							url: 'https://www.2306.tech/CCShop/images/1.jpg'
						},
						{
							index: 1,
							url: 'https://www.2306.tech/CCShop/images/1.jpg'
						},
						{
							index: 2,
							url: 'https://www.2306.tech/CCShop/images/1.jpg'
						},
						{
							index: 3,
							url: 'https://www.2306.tech/CCShop/images/1.jpg'
						},
						{
							index: 4,
							url: 'https://www.2306.tech/CCShop/images/1.jpg'
						},
						{
							index: 5,
							url: '../../static/1.jpg'
						},
						{
							index: 7,
							url: '../../static/1.jpg'
						},
						{
							index: 8,
							url: '../../static/1.jpg'
						}
					]
				},
				menu:{
					menuList:[
						{
							index:1,
							menuImg:'../../static/icon1.png',
							menuName:'农产品',
							menuUrl:'../goodsList/goodsList?type=1'
						},
						{
							index:2,
							menuImg:'../../static/icon2.png',
							menuName:'民宿',
							menuUrl:'../hotelList/hotelList'
						},
						{
							index:3,
							menuImg:'../../static/icon3.png',
							menuName:'其他',
							menuUrl:'../goodsList/goodsList?type=2'
						},
					]
				},
				activity:{
					activityList:[
						{
							index:1,
							activityName:'每日签到',
							activityImg:'../../static/ac1.png',
							activityUrl:''
						},
						{
							index:2,
							activityName:'每日签到',
							activityImg:'../../static/ac2.jpeg',
							activityUrl:''
						},
						{
							index:3,
							activityName:'每日签到',
							activityImg:'../../static/ac3.jpeg',
							activityUrl:''
						},
						
					]
				},
				goods:{
					goodsList: [{"goodsImg":"images/goods/FA0257/FA0257-0.jpg;images/goods/FA0257/FA0257-1.jpg;images/goods/FA0257/FA0257-2.jpg;images/goods/FA0257/FA0257-3.jpg;","goodsPromotePrice":0,"goodsId":"FA0257","goodsSupplyRange":"","goodsOrigin":"河北 阜平","goodsSoldAmount":3,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":2000,"goodsIsUseScore":0,"goodsPrice":18.8,"goodsIsHelper":1,"goodsUnit":"斤","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"阜平花山香菇干200g 珍珠菇 蘑菇 菌菇 无根 南北山珍干货 煲汤红烧蒸蛋","goodsDescription":"香菇肉质肥厚细嫩，味道鲜美，香气独特，营养丰富，是一种食药同源的食物，具有很高的营养、药用和保健价值。","goodsBackScoreAccount":188},{"goodsImg":"images/goods/K2000/K2000-0.jpg;images/goods/K2000/K2000-1.jpg;images/goods/K2000/K2000-2.jpg;","goodsPromotePrice":0.01,"goodsId":"K2000","goodsSupplyRange":"","goodsOrigin":"阜平","goodsSoldAmount":4,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":100,"goodsIsUseScore":0,"goodsPrice":49.9,"goodsIsHelper":1,"goodsUnit":"箱","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"菠萝 甜蜜怡人 夏日佳选","goodsDescription":"金钻凤梨精品2个装 净重约5斤 无眼菠萝手撕凤梨 香水菠萝 新鲜水果 2个装","goodsBackScoreAccount":499},{"goodsImg":"images/goods/FM900/FM900-0.jpg;images/goods/FM900/FM900-1.jpg;images/goods/FM900/FM900-2.jpg;images/goods/FM900/FM900-3.jpg;","goodsPromotePrice":0,"goodsId":"FM900","goodsSupplyRange":"","goodsOrigin":"河北 阜平","goodsSoldAmount":0,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":100,"goodsIsUseScore":0,"goodsPrice":68.8,"goodsIsHelper":1,"goodsUnit":"箱","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"阳光金奇异果 22-25个原箱装 特大22-25号果 单果重约134-175g 新鲜水果 大促返场销量王放榜！快来PICK！满3件9折4件8折！爆品献礼，立即抢购！","goodsDescription":"阳光金奇异果 6个装 经典爆款装 单果重约80-100g 新鲜水果","goodsBackScoreAccount":688},{"goodsImg":"images/goods/FT2010/FT2010-0.jpg;images/goods/FT2010/FT2010-1.jpg;images/goods/FT2010/FT2010-2.jpg;images/goods/FT2010/FT2010-3.jpg;images/goods/FT2010/FT2010-4.jpg;","goodsPromotePrice":0,"goodsId":"FT2010","goodsSupplyRange":"","goodsOrigin":"河北 阜平","goodsSoldAmount":0,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":5,"goodsTotalAmount":1000,"goodsIsUseScore":0,"goodsPrice":26.8,"goodsIsHelper":1,"goodsUnit":"份","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"【精细选种，生物防虫】凡谷归真 西红柿 番茄 约1.25kg 新鲜蔬菜 沙瓤细腻，软糯多汁，儿时味道，天然无添加 ","goodsDescription":"西红柿 番茄 约1.25kg 新鲜蔬菜 沙瓤细腻，软糯多汁，儿时味道，天然无添加 ","goodsBackScoreAccount":10},{"goodsImg":"images/goods/K900/K900-0.jpg;images/goods/K900/K900-1.jpg;images/goods/K900/K900-2.jpg;images/goods/K900/K900-3.jpg;images/goods/K900/K900-4.jpg;","goodsPromotePrice":0,"goodsId":"K900","goodsSupplyRange":"","goodsOrigin":"河北 阜平","goodsSoldAmount":0,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":1000,"goodsIsUseScore":0,"goodsPrice":42.9,"goodsIsHelper":1,"goodsUnit":"箱","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"香甜哈密瓜 新鲜现采 果味清香","goodsDescription":"哈密瓜2个装优选果 现摘现发 甜瓜 2枚（约7-8斤）红心脆多汁、肉厚细腻、清香爽口 。","goodsBackScoreAccount":429},{"goodsImg":"images/goods/K901/K901-0.jpg;images/goods/K901/K901-1.jpg;images/goods/K901/K901-2.jpg;images/goods/K901/K901-3.jpg;","goodsPromotePrice":0,"goodsId":"K901","goodsSupplyRange":"0","goodsOrigin":"河北 阜平","goodsSoldAmount":30,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":1000,"goodsIsUseScore":0,"goodsPrice":32.9,"goodsIsHelper":1,"goodsUnit":"盒","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"红心火龙果4个装 新鲜水果 红肉火龙果大果单果约300g-400g 水果","goodsDescription":"4个装  红心火龙果，香甜可口，夏日佳选。","goodsBackScoreAccount":329},{"goodsImg":"images/goods/K902/K902-0.jpg;images/goods/K902/K902-1.jpg;images/goods/K902/K902-2.jpg;","goodsPromotePrice":0,"goodsId":"K902","goodsSupplyRange":"北京城市学院","goodsOrigin":"河北 阜平","goodsSoldAmount":50,"goodsIsBackScore":0,"goodsType":"","goodsCategoryId":"1001","goodsUseScoreMax":0,"goodsStartTime":null,"goodsStatus":1,"goodsLowerLimit":1,"goodsTotalAmount":2000,"goodsIsUseScore":0,"goodsPrice":38.9,"goodsIsHelper":1,"goodsUnit":"盒","goodsEndTime":null,"goodsIsPromote":0,"goodsName":"夏黑无籽葡萄 粒粒饱满 酸甜可口","goodsDescription":"颗颗饱满的夏黑无籽葡萄，简直是夏日的不二之选~！","goodsBackScoreAccount":389}]
				}
				
			}
		},
		onLoad() {
			const app = getApp();
			getIndexGoods().then(resp => {
				this.goods.goodsList = resp;
			})
		},
		methods: {
			pickerChange(e) {
				this.areaPicker.index = e.target.value;
			},
			menuClick(event) {
				console.log("event: ",event);
				uni.navigateTo({
					url: event.currentTarget.dataset.url
				})
			}

		}
		
	}
</script>
<style>
	@import url('./index.css');
</style>
